All Posts
News bits
Chrome 114
Chrome 114
Chrome 114 がリリース。
text-wrap: balance
text-wrap: balanceを利用すれば、長い文字列をそれぞれの行の長さができるだけ等しくなるように改行できます。
これを利用すれば多言語サイトで、言語毎に見た目を微調整するといったケースを少し回避できるかもしれません。ただし現状 Chrome 以外でtext-wrapはサポートされていないので、使用できる機会はかなり限られます。
Popover API
Popover API を利用すれば、一時的な UI 要素、ユーザーの行動を制限しない非モーダルなオーバーレイ、ポップアップ、ポップオーバー、ダイアログなどを簡単に実装できます。
モーダルつまり、それ自身が何らかのインタラクションを行うまでユーザーの行動を制限したい場合は、既に主要なブラウザで利用できる dialog 要素が推奨されます。ただし、dialog 要素はデフォルトで最上位レイヤーに来ないため、最上位に配置される Popover API を併用したくなることは多々あるように思います。
Popover API には、HTML 属性を利用した宣言的な方法と JavaScript を利用する方法が用意されています。HTML 属性を利用した方法では次のようにします。
<button popovertarget="my-popover">押すとポップオーバーが表示される</button>
<div id="my-popover" popover>
<p>これはポップオーバーです。</p>
<p></p>
</div>詳しい使い方については、次の Chrome の記事などを呼んでください。
https://developer.chrome.com/blog/introducing-popover-api/
現時点では、Chrome 及び Safari の Technology Preview でのみ利用できます。
著者について
Hi there. I'm hrdtbs, a frontend expert and technical consultant. I started my career in the creative industry over 13 years ago, learning on the job as a 3DCG modeler and game engineer in the indie scene.
In 2015 I began working as a freelance web designer and engineer. I handled everything from design and development to operation and advertising, delivering comprehensive solutions for various clients.
In 2016 I joined Wemotion as CTO, where I built the engineering team from the ground up and led the development of core web and mobile applications for three years.
In 2019 I joined matsuri technologies as a Frontend Expert, and in 2020 I also began serving as a technical manager supporting streamers and content creators.
I'm so grateful to be working in this field, doing something that brings me so much joy. Thanks for stopping by.